<script setup>
import {ref,onMounted} from "vue";
import {ElMessage} from "element-plus";
import qs from "qs";
import request from '@/utils/request';
import {useRoute} from "vue-router";
import router from "@/router";
let orderId = useRoute().query.orderId

//http://localhost:8080/payment?orderId=1721573099668835

//订单信息
const orderInfo=ref({
  id:'',
  orderStatus:'',
  vehicleId:'',
  addr:'',
  pickupCityId:'',
  startDate:'',
  endDate:'',
  rentalDuration:'',
  totalCost:'',
  paymentStatus:'',
  couponType:'',
  createTime:'',
  brandInfo:'',
  brandId:'',
  plateNumber:'',
  imgs:''

})


const logOrderDetail = () =>{
  request.get(`/order/`+orderId).then(res => {
    orderInfo.value=res.data;
    Object.assign(orderInfo,res.data)
    orderInfo.value.startDate = formatDate(res.data.startDate)
    orderInfo.value.endDate = formatDate(res.data.endDate)
    orderInfo.value.createTime = formatDate(res.data.createTime)

  })
}
//日期格式formater
const formatDate= (date)=> {
  var d = new Date(date),
      month = '' + (d.getMonth() + 1),
      day = '' + d.getDate(),
      year = d.getFullYear();

  if (month.length < 2)
    month = '0' + month;
  if (day.length < 2)
    day = '0' + day;

  return [year, month, day].join('-');
}
const paymentMethod = ref('2')
//options

const paymentMethodOptions = ref()
const brandOptions = ref()

//加载字典项----------------------------------------------------------------------
const loadAllDictOptions = ()=>{

  loadDictOptionsByCode(paymentMethodOptions,'bus_order_payment_method')
  loadDictOptionsByCode(brandOptions,'bus_brand_id')

}
//formater-----------------------------------------------------------------
const paymentMethodFormatter = (val)=>{

  for(let index in paymentMethodOptions.value){
    if(paymentMethodOptions.value[index].value==val){
      val = paymentMethodOptions.value[index].label
      return val
    }
  }
  return val
}
const brandFormatter = (val)=>{

  for(let index in brandOptions.value){
    if(brandOptions.value[index].value==val){
      val = brandOptions.value[index].label
      return val
    }
  }
  return val
}
const paymentParam = ref({
  paymentMethod : paymentMethod
})
//支付宝支付------------------------------------------------------------------
const order = ref({id:'',totalPrice:''})
const pay = ()=>{
  let url = process.env.VUE_APP_PAY_URL + '/alipay/pay';
  let params = {
    outTradeNo: order.value.id,
    subject: '凹凸租车订单支付',
    totalAmount: order.value.totalPrice
  }
  window.open(url + '?' + qs.stringify(params));
}

//支付按钮
const handlePayment = () =>{
  dialogVisible.value = true

  order.value.id = orderId
  order.value.totalPrice = orderInfo.value.totalCost
  request.get(`/order/`+orderId).then(res => {
    if(res.code == 200){
      //如果支付方式是支付宝
      if(paymentMethod.value==='2'){
        pay()
      }else{
        //TODO 微信支付
      }
    }
  })

  // request.post(`/order/payment/`+orderId,paymentParam.value).then(res => {
  //   ElMessage.success("支付成功")
  //   router.push("/center")
  // })
}
//支付宝支付窗口------------------------------------------------------------------------------------------------------
const dialogVisible = ref(false)
const handleClose = () => {
  dialogVisible.value = false
}

const handleCheckPaymentSuccess = ()=>{
  handleClose()
  request.post(`/order/validatepayment/`+orderId).then(res => {
    if(res.data ==="1"){
      ElMessage.success("支付成功")
      router.push("/center")
    }else {
      ElMessage.error("支付失败")
    }
  })
}


onMounted(()=>{
  loadAllDictOptions()
  logOrderDetail()
})
</script>

<template>
  <div  style="width: 1154px;margin: 0 auto;position: relative; color: rgb(51, 51, 51)" >
    <h2>订单信息</h2>
    <el-form  label-width="150px" style="width: 100%">
      <el-row gutter="10">
        <el-col :span="8">
          <el-form-item label="品牌:" >
            <el-input readonly v-model="orderInfo.brandId" style="width: 100%;" :formatter="brandFormatter"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆名称:" >
            <el-input readonly v-model="orderInfo.brandInfo" style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车牌号:" >
            <el-input readonly v-model="orderInfo.plateNumber" style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆图片:" >
            <img :src="orderInfo.imgs" alt="" style="width: 200px;height: 100px">
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单编号:" >
            <el-input readonly v-model="orderInfo.id" style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单创造日期:" >
            <el-input readonly v-model="orderInfo.createTime" style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="取车地址:" >
            <el-input readonly v-model="orderInfo.addr" style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="取车城市:" >
            <el-input readonly v-model="orderInfo.pickupCityId" style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="租赁开始日期:" >
            <el-input readonly v-model="orderInfo.startDate" style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="租赁结束日期:" >
            <el-input readonly v-model="orderInfo.endDate" style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="租赁天数:" >
            <el-input readonly v-model="orderInfo.rentalDuration" style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="租赁费用:" >
            <el-input readonly v-model="orderInfo.totalCost" style="width: 100%;"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16"></el-col>
        <el-col :span="8">
          <el-radio-group v-model="paymentMethod">
            <el-radio v-for="(item,index) in paymentMethodOptions" :key="index" :value="item.value">{{item.label}}</el-radio>
          </el-radio-group>
          <el-button type="info" style="margin-left: 50px">返回</el-button>
          <el-button type="primary" style="margin-left: 10px" @click="handlePayment">支付</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog title="支付" v-model="dialogVisible" style="width: 600px" :before-close="handleClose">
      <el-row style="width: 100%">
        <span>前往支付宝支付</span>
        <el-col :span="24" style="height: 200px"></el-col>
      </el-row>
      <el-row>
        <el-button link type="success" @click="handleCheckPaymentSuccess">我已支付</el-button>
      </el-row>
    </el-dialog>
  </div>

</template>

<style scoped>

</style>